<template>
	<view class="order-page">
		<view class="search-con c-flex c-flex-col">
			<view class="c-flex jc-between gap-5">
				<view class="input-con c-flex jc-start c-item-center ">
					<image :src="remoteImgUrl+'search-icon.png'" style="width: 42rpx;max-height: 42rpx;    margin-right: 12rpx;"></image>
					<input class="uni-input" v-model="lpgUserName" name="text" style="width:72%" confirm-type="search" @confirm="onInputChange"  placeholder="搜索订单号" />
					<view class="line"></view>
					<text @click="onInputChange">搜索</text>
				</view>
			</view>
		</view>
		<!-- <view class="tabs-con c-flex c-flex-row jc-start">
			<view class="tab-item" v-for="(item,index) in tabbarArr" :key="index" @click="onTabbarClick(item)"
			    :class="{'selected':item.selected}">
				<image class="sele-bg" v-if="item.selected" :src="orderImgUrl+'choose.png'"></image>		
				{{item.label}}
			</view>
		</view> -->
		<!-- 列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="p-list">
				<view class="p-l-item" v-for="(item,i) in list" :key="i" @click="onViewDetails(item)">
					<view class="title-con c-flex jc-between c-item-center" >
						<view class="c-flex jc-start c-item-center" >
							<image class="time-icon" :src="stockImgUrl+'stock-manage-time.png'"></image>
							<view class="title-1">创建时间：{{item.createTime}} </view>
							<!-- <image class="status" v-if="item.status == 1" :src="stockImgUrl+'stock-manage-weichuku.png'"></image>
							<image class="status" v-if="item.status == 2" :src="stockImgUrl+'stock-manage-yichuku.png'"></image>
							<image class="status" v-if="item.status == 3" :src="stockImgUrl+'stock-manage-jxz.png'"></image> 
							<image class="status"  :src="stockImgUrl+'stock-manage-yiruku.png'"></image>-->
						</view>
						<!-- <image class="status" style="width:40rpx;height:40rpx;" v-if="item.status == 1" :src="stockImgUrl+'stock-manage-close.png'"></image> -->
						
					</view>
					<view class="p-content c-flex c-flex-col" >
						<view class="p-c-item" >
							<text>订单编号: </text><text>{{item.code}}</text>
						</view>
						<view class="p-c-item" >
							<text>出库方: </text><text>{{item.sourceName||'-'}}</text>
						</view>
						<view class="p-c-item" >
							<text>收货方: </text><text>{{item.targetName}}</text>
						</view>
						<view class="p-c-item" >
							<text>入库数量: </text><text>{{item.subActSingleNum||''}}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<tydPrompt ref='tydPrompt' :content="content" @confirmPrompt='confirmPrompt'></tydPrompt>
		<view class="add-bt" >
			<image :src="stockImgUrl+'stock-manage-scan.png'" style="width:112rpx;height:112rpx;" @click="onScan" mode=""></image>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {INSTOCK_STATUS} from '@/utils/global.js';
	import {mapStatus,mapMutations} from 'vuex'
	export default {
		components: {
		},
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件，内部已注册onPullDownRefresh)
		data() {
			return {
				content: '是否送达',
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/',
				stockImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/stock/',
				commonUrl: this.$API.IMG_URL + '/common/',
				lpgUserName:'',
				tabbarItem:null,
				tabbarArr:[],
				downOption:{
					auto:false,
					native: true // 必须配置此项，且需在pages.json配置"enablePullDownRefresh" : true
				},
				upOption:{
					auto:false,
					noMoreSize: 4, 
					empty:{
						tip: '~ 搜索无数据 ~',
						btnText: ''
					}
				},
				page:1,
				limit:10,
				indicatorStyle:`height: 50px;line-height:50px;`,
				list:[
					// {time:'2024-04-23 15:21',status:1,orderNo:'33444999945959',ckf:'莒县能源加气站总站',shf:'高庄液化气站点',orderNum:'50瓶'},
					// {time:'2024-04-23 15:22',status:2,orderNo:'33444999945959',ckf:'莒县能源加气站总站',shf:'高庄液化气站点',orderNum:'50瓶'},
				],
				orderId:null,
				stockType:1
			};
		},
		onLoad(options) {
			console.log('onLoad')
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor:'#000000'
			});
			this.tabbarArr = INSTOCK_STATUS;
			this.stockType = options.stockType;
		},
		onShow() {
			console.log('onShow')
			this.onInputChange();
		},
		methods:{
			...mapMutations(['setInStockTabStatus']),
			initTabbar(){
				this.tabbarArr.forEach(item=>{
					item['selected'] = false;
				});
				this.tabbarItem = this.$store.getters.inStockTabStatus;
				this.tabbarItem.selected = true;
				this.initData();
			},
			initData(){
				// uni.showLoading();
				const params = {pageNum:this.page,limit:this.limit,code:this.lpgUserName,stockType:this.stockType};
				this.$API.findStockBillList(params).then(res =>{
						// uni.hideLoading();
						//设置列表数据
						if(res.page.current == 1) this.list = []; //如果是第一页需手动制空列表
						const currList  = res.page.records;
						this.list=this.list.concat(currList); //追加新数据
						
						this.mescroll.endBySize(res.page.records.length,res.page.total);//(当前页的数据个数, 总数据量) 判断是否有下一页
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			},
			//tabbar切换事件监听
			onTabbarClick(item){
				
				//uni.setStorageSync('orderStatus',null)
				this.tabbarItem.selected = false;
				item.selected = true;
				this.tabbarItem = item;
				this.setInStockTabStatus(item)
				this.list = [];
				this.page = 1;
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			// 下拉刷新
			downCallback(){
				this.mescroll.resetUpScroll()//重置列表为第一页 
				console.log('down')
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log('up')
				this.page = page.num;
				//联网加载数据
				this.initData();
			},
			onInputChange(){
				this.page = 1;
				this.mescroll.resetUpScroll()//重置列表为第一页 
			},
			onScan() {
				// 允许从相机和相册扫码
				const that = this;
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						console.log(res);
						if (res.result) {
							let data = res.result;
							that.$API.stockScanCheck({qrCode:data,stockType:that.stockType}).then(obj=>{
								uni.navigateTo({
									url: './instock-upload?data='+ JSON.stringify(obj.data) +'&stockType='+that.stockType
								})
							});
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码');
					}
				})
			},
			onViewDetails(item){
				uni.navigateTo({
					url:'./order-details?item='+JSON.stringify(item)
				})
			},
			
		}
	}
</script>
<style>
	page{
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
.order-page{
	position:relative; background-image: linear-gradient(rgba(249, 195, 115, .3) 0%,#F9F9F9 100%);
	//background:rgba(249, 195, 115, .6);
	.search-con{
		border-radius: 18rpx;padding: 20rpx 18rpx 0;
		.input-con{
			position: relative;width: 100%;border: 2rpx solid rgba(255, 154, 22, 1);
			height: 80rpx;line-height: 80rpx;padding-left: 18rpx;background: #ffffff;border-radius: 16rpx;font-size: 24rpx;
			.line{
				height: 40rpx;border: 2rpx solid rgba(255, 154, 22, 1);position: absolute;right: 115rpx;
			}
			text{
				font-size: 28rpx;font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;color: #3E3E3E;line-height: 40rpx;position: absolute;right: 38rpx;
			}
		}
		/*修改提示文字的颜色*/
		input::-webkit-input-placeholder {color: #8B959F;}
		input:-moz-placeholder {color: #8B959F;}
		input::-moz-placeholder { color: #8B959F;}
		input:-ms-input-placeholder { color: #8B959F;}
	}
	.tabs-con{
		margin: 40rpx 40rpx 8rpx; width:450rpx;gap: 50rpx;
		.tab-item{
			font-size: 28rpx;font-weight: 500;color: #001F42;position: relative;padding-bottom: 14rpx;
			text{
				background: #FA4B4B;padding: 0 10rpx;border-radius: 50%;
				font-size: 24rpx;color: #ffffff;position: absolute;right: -20rpx;top: -14rpx;
			}
			.sele-bg{
				position: absolute;width: 90rpx;height: 24rpx;bottom: 5rpx;
			}
		}
		.selected{ font-size: 30rpx;font-weight: 800;color: #333333;}//border-bottom: 6rpx solid #0084FF;
	}
	.p-list{
		margin: 20rpx 18rpx 0;
		.p-l-item{
			background: #FFFFFF;border-radius: 18rpx;padding: 15rpx 28rpx 20rpx;margin-bottom:20rpx;position:relative;
			.title-con{
				.d_icon{
					margin-right: 10rpx;width: 14rpx;height: 32rpx;background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);transform:skewX(-12deg)
				}
				.time-icon{width: 50rpx;height: 50rpx;    margin-right: 16rpx;}
				border-bottom: 2rpx solid #F7F7F7;padding-bottom: 12rpx;
				.status{width:84rpx;height:38rpx;}
				.title-1{
					font-size: 26rpx;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 400;color: #333333;margin-right: 8rpx;
				}
			}
			.p-content{
				margin: 16rpx 0 16rpx;background: #F9F9F9;border-radius: 16rpx;padding: 24rpx 22rpx;gap:20rpx;
				.p-c-item{
					font-family: PingFang-SC, PingFang-SC;font-weight: 500;
					text:first-child{font-size: 26rpx;color: #666666;display: inline-block;width: 170rpx;}
					text:nth-child(2){font-size: 26rpx;color: #333333;font-weight: 600;}
				}
				
			}
		}
	}
	.add-bt{
		position:fixed;right:20rpx;bottom:10%;
		image{width: 100rpx;height: 100rpx;}
	}
}
</style>
